import React from 'react';
import { connect } from 'dva';
import {
  WingBlank, WhiteSpace, Flex, Card,
} from 'antd-mobile';
import styles from './styles.less';

const QrcodePage = ({ profile }) => {
  return (
    <WingBlank size="md">
      <WhiteSpace />
      <Card>
        <WhiteSpace size="xl" />
        <Flex
          justify="center">
          {profile.headPortrait !== null ? 
             <img 
            className={styles.avatar}
            src={profile.headPortrait}/>:
           <img 
            className={styles.avatar}
            src="http://test.tcm-ai.com/dist/e17db53258f2fdf94a820b77bb70d783.jpg"/>}
        </Flex>
        <WhiteSpace size="xl" />
        <Flex justify="center">
          {profile.name}
        </Flex>
        <WhiteSpace size="xl" />
        <Flex justify="center">
          <img
            width={540}
            height={540}
            src={profile.qrcode || 'http://placehold.it/540?text=二维码'} />
        </Flex>
        <WhiteSpace size="xl" />
        <Flex justify="center">扫描上面的二维码加我好友</Flex>
        <WhiteSpace size="xl" />
      </Card>
    </WingBlank>
  );
};

export default connect(({ profile }) => ({
  ...profile,
}))(QrcodePage);
